<template>
  <el-row>
    <el-col :span="24">
      <el-card style="max-width: 100%">
        <template #header>
          <div class="card-header">
            <span>卡路里条形图</span>
          </div>
        </template>
        <el-row>
          <span>Calorie bar chart</span>
          <h1>{{}}</h1>
        </el-row>
        <el-row>
          <div class="demo-progress">
            <el-progress :percentage="50">
              <el-button text>Content</el-button>
            </el-progress>
            <el-progress
              :text-inside="true"
              :stroke-width="20"
              :percentage="50"
              status="exception"
            >
              <span>Content</span>
            </el-progress>
            <el-progress type="circle" :percentage="100" status="success">
              <el-button type="success" :icon="Check" circle />
            </el-progress>
            <el-progress type="dashboard" :percentage="80">
              <template #default="{ percentage }">
                <span class="percentage-value">{{ percentage }}%</span>
                <span class="percentage-label">Progressing</span>
              </template>
            </el-progress>
          </div>
        </el-row>
        <el-row> </el-row>
        <template #footer>Footer content</template>
      </el-card>
    </el-col>
  </el-row>
  <el-row>
    <el-col :span="24">
      <el-card style="max-width: 100%">
        <template #header>
          <div class="card-header">
            <span>Card name</span>
          </div>
        </template>
        <p v-for="o in 4" :key="o" class="text item">{{ "List item " + o }}</p>
        <template #footer>Footer content</template>
      </el-card>
    </el-col>
  </el-row>
</template>
<script setup>
</script>
<style scoped>
.percentage-value {
  display: block;
  margin-top: 10px;
  font-size: 28px;
}
.percentage-label {
  display: block;
  margin-top: 10px;
  font-size: 12px;
}
.demo-progress .el-progress--line {
  margin-bottom: 15px;
  max-width: 600px;
}
.demo-progress .el-progress--circle {
  margin-right: 15px;
}
</style>